<template>
    <view class="wrap">
        <view class="title">快速选车</view>
        <view class="brand_wrap">
            <view class="brand">
                <template v-for="(item, index) in carBrandList">
                    <view class="label" :class="{active:item.carBrandName==carBarndActive.carBrandName}" :key="index" @click="onClickBarnd(item,index)">
                        <view class="text">{{ item.carBrandName }}</view>
                    </view>
                </template>
            </view>
            <!-- <view class="icon">
                <image src="@/static/icon_list.png" mode=""></image>
            </view> -->
        </view>
        <!-- 标签 -->
        <view class="tags-wrap">
            <view class="tags" :class="{active:item.dictValue==nakedCarPriceActive.dictValue}" v-for="(item, index) in nakedCarPriceList" :key="index" @click="onClickNackedCarPrice(item)">{{item.dictValue}}</view>
        </view>
        <!-- <view class="search"> -->
            <!-- <u--input class="input" prefixIcon="search" placeholder="想买什么品牌的车"></u--input> -->
            <u-search shape="square" v-model="keywords" borderColor="#f7f7f7" bgColor="#fff" placeholder="想买什么品牌的车" placeholderColor="#CDCDCD" :showAction="false" @search="doSearch(keywords)"></u-search>
        <!-- </view> -->
    </view>
</template>

<script>
import isEmpty from 'lodash/isEmpty';
import * as homeApi from '@/common/apis/home-api';

export default {
    data() {
        return {
            nakedCarPriceList: [], // 指导价
            carBrandList: [], // 品牌
            nakedCarPriceActive: {},
            carBarndActive: {},
            keywords: '',
        };
    },
    computed: {
        queryParams() {
            const returnBody = {};
            if (!isEmpty(this.keywords)) {
                returnBody.keywords = this.keywords;
            }
            if (!isEmpty(this.carBarndActive.carBrandId)) {
                returnBody.brandId = this.carBarndActive.carBrandId;
            }
            if (!isEmpty(this.nakedCarPriceActive.dictCode)) {
                returnBody.guidePriceSearchValue = this.nakedCarPriceActive.dictCode;
            }

            return returnBody;
        },
    },
    watch: {
        keywords(val) {
            if (val != this.carBarndActive.carBrandName) {
                this.carBarndActive = {};
                this.$store.dispatch('home/getMmvBuyBasicList', this.queryParams);
            }
        },
    },
    async mounted() {
        await this.getList();
        await this.$store.dispatch('home/getMmvBuyBasicList', this.queryParams);
    },
    methods: {
        /**
         * 获取搜索条件
         */
        async getList() {
            try {
                const result = await homeApi.vehiclePay();
                this.nakedCarPriceList = result.nakedCarPriceList;  // 指导价
                this.carBrandList = result.carBrandList; // 品牌
            } catch (error) {
                uni.showToast({ title: error, icon: 'error' });
            }
        },
        /**
         * 选择品牌
         */
        onClickBarnd(item) {
            if (this.carBarndActive.carBrandId == item.carBrandId) {
                this.carBarndActive = {};
                this.keywords = ''; // 清空关键字
            } else {
                this.carBarndActive = item;
                this.keywords = item.carBrandName; // 设置关键字
            }
            this.$store.dispatch('home/getMmvBuyBasicList', this.queryParams);
        },
        /**
         * 选择指导价
         */
        onClickNackedCarPrice(item) {
            if (this.nakedCarPriceActive.dictCode == item.dictCode) {
                this.nakedCarPriceActive = {};
            } else {
                this.nakedCarPriceActive = item;
            }
            this.$store.dispatch('home/getMmvBuyBasicList', this.queryParams);
        },
        /**
         * 搜索
         */
        doSearch() {
            this.$store.dispatch('home/getMmvBuyBasicList', this.queryParams);
        },
    },
};
</script>

<style lang="scss" scoped>
.wrap {
    padding: 28upx 41upx;
}
.title {
    font-size: 30upx;
    font-weight: bold;
    color: #333;
    margin-bottom: 40upx;
}

.brand_wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 31upx;
}
.brand {
    font-size: 26upx;
    font-weight: bold;
    color: #333;
    overflow-x: scroll;
    white-space: nowrap;
    position: relative;
    .active {
        color: #157d6f;
    }
}

.label {
    display: inline-block;
    & + & {
        margin-left: 54upx;
    }
}

.icon {
    display: flex;
    justify-content: center;
    align-items: center;
    display: block;
    position: relative;
    image {
        width: 21upx;
        height: 19upx;
    }
    &::after {
        content: "";
        display: block;
        width: 150%;
        height: 100%;
        position: absolute;
        background: linear-gradient(to left, #fff, rgba(#fff, 0.5));
        // box-shadow: -20px 0 10px #fff;
        right: 100%;
        top: 0;
    }
}

.search {
    width: 100%;
    // background: #f7f7f7;
    border-radius: 8px;
    line-height: 72upx;
}

.tags-wrap {
    overflow: auto;
    white-space: nowrap;
    margin-bottom: 31upx;
}

.tags {
    width: 150upx;
    line-height: 48upx;
    background: #eeeeee;
    border-radius: 24upx;
    font-size: 22upx;
    text-align: center;
    font-weight: 700;
    color: #232323;
    display: inline-block;
    & + & {
        margin-left: 13upx;
    }
    &.active {
        background: #a3e8df;
        color: #157d6f;
    }
}
</style>
